<template lang='pug'>
  //短信记录
  div.box
    el-header.header(style="height:40px;")
      el-input.mar_r( style="width:200px" v-model="listQuery.template" placeholder="短信模板" )
      el-input.mar_r( style="width:200px" v-model="listQuery.phone" placeholder="手机号码" )
      el-button( type="primary" @click="searchBtn") 搜索

    el-main
      el-table( :data="list" fit highlight-current-row style="width: 100%" )
        el-table-column( 
          label="序号" width="100" 
          align="center"
          type="index"
          :index="indexMethod")
        el-table-column(align="center" label="手机号码")
          template(slot-scope="scope")
            span {{scope.row.phone}}
        el-table-column(align="center" label="短信模板")
          template(slot-scope="scope")
            span {{scope.row.template}}
        el-table-column(align="center" label="验证码")
          template(slot-scope="scope")
            span {{scope.row.code}}
        el-table-column(align="center" label="发送时间")
          template(slot-scope="scope")
            span {{scope.row.createTime}}
    el-footer
      el-pagination(
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="listQuery.limit"
      layout="total,sizes, prev, pager, next,jumper"
      :total="total")
</template>

<script>

import { page } from '@/api/Basic/sms'
import { mixin } from "@/mixin/index";
export default {
  mixins: [mixin],
  name: "Login",
  data() {
    return {
      listQuery:{
        page:1,
        limit:10,
        template:'',
        phone:'',
      },
      list:[],
      total:0
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList(){
      const Response = await page(this.listQuery)
      if(!Response) return
      this.list = Response.data.records;
      this.total = Response.data.total;
    },
    searchBtn(){
      this.getList();
    }
  }
};
</script>
<style lang="less" scoped>


</style>


